class cart{
    constructor(){
        this.url = "http://localhost:3000/api";
        this.tbody = document.querySelector("tbody");
        this.load();
        this.getLocal();
        this.addEvent()
    }
    addEvent(){
        const that = this;
        this.tbody.addEventListener("click",function(eve){
            const e = eve || window.event;
            const target = e.target || e.srcElement;
            if(target.className === "lose"){
                that.id = target.parentNode.parentNode.getAttribute("index");
                if(target.nextElementSibling.innerHTML - 0 > 1){
                    that.num = (target.nextElementSibling.innerHTML--)-1;
                }else{
                    that.num = target.nextElementSibling.innerHTML = 1;
                }
                that.setLoat(function(i){
                    that.goods[i].num = that.num;
                });
                $("#allcheck")[0].checked = allFlag(that.goods);

                $(".sum").html(allNum(that.goods));
                $(".allprice").html(allPrice(that.goods));
            }
        })
        this.tbody.addEventListener("click",function(eve){
            const e = eve || window.event;
            const target = e.target || e.srcElement;
            if(target.className === "add"){
                that.id = target.parentNode.parentNode.getAttribute("index");
                    that.num = (target.previousElementSibling.innerHTML++)+1;
                that.setLoat(function(i){
                    that.goods[i].num = that.num;
                });
            $("#allcheck")[0].checked = allFlag(that.goods);

            $(".sum").html(allNum(that.goods));
            $(".allprice").html(allPrice(that.goods));
            }
        })

     
        $(".sum").html(allNum(that.goods));
        
        $("#allcheck").change(function(){
            that.goods.forEach(val=>{
                val.flag = Number(this.checked);
            })
            localStorage.setItem("goods", JSON.stringify(that.goods))
            for(var i=0;i<$(".check").length;i++){
                $(".check")[i].checked = this.checked;
            }
            $(".sum").html(allNum(that.goods));
            $(".allprice").html(allPrice(that.goods));
        })
        
        
    }

    
    setLoat(cb){
        let i = 0;
        this.goods.some((val,idx)=>{
            i = idx;
            return val.proId === this.id;
        })
        cb(i);
        localStorage.setItem("goods",JSON.stringify(this.goods));
    }
    getLocal(){
        this.goods = localStorage.getItem("goods") ? JSON.parse(localStorage.getItem("goods")) : [];
    }
    load(){
        ajax({
            url:this.url,
            data:{
                type:"getgoods1"
            },
            success:res=>{
                this.res = JSON.parse(res).data;
                this.render();
                $("#allcheck")[0].checked = allFlag(this.goods);

                $(".sum").html(allNum(this.goods));
                $(".allprice").html(allPrice(this.goods));
            }
        })
    }
    render(){
        let str = "";
        this.res.forEach(val1=>{
            this.goods.forEach(val2=>{
                if(val1.id == val2.Id){
                    str += `<tr index="${val2.id}">
                    <td><input type="checkbox" ${val2.flag ? "checked" : ""}
                     class="check"></td>
                    <td>
                        <div class="gwxqt">
                            <img src="${val1.img}" alt="" id="hh">
                            <span class="gwt">${val1.proName}</span>
                        </div>
                    </td>
                        <td>￥ ${val1.price}</td>
                        <td><div type="number" class="setNum1" >
                        <button type="number" class="setNum2 lose" >-</button>
                       <input type="number" class="setNum" value="${val2.num}">
                        <button type="number" class="setNum3 add" >+</button>
                    </div></td>
                    
                    <td>${val2.num*val1.price}</td>
                    <td class="del">删除</td>
                </tr>`;
            }
            })
        })
        this.tbody.innerHTML = str;
    }  
 
}

new cart();

function allNum(goods){
    return goods.reduce((prev, val)=>{
        return val.flag ? prev + val.num : prev;
    }, 0)
}


function allPrice(goods){
    return goods.reduce((prev, val)=>{
        return val.flag ? prev + val.num * val.price : prev;
    }, 0)
}

function allFlag(goods){
    return goods.every(val=>val.flag)
}

